<template>
	<el-container class="kd-abnormal-template">
		<div
			class="smailbg"
			:class="{ showSmallBtn: smallStyle }"
			@click="changeShowBar()"
		>
			<span class="iconfont icondiandian"></span>
		</div>
		<el-aside
			class="kd-left-tree-wrap"
			:class="{ showSmallWrap: showTree }"
		>
			<div class="unchange_tree_wrap">
				<system-tree @handleEvent="treeHandle" :nodeType="treeType" :leaf="leaf" :showTreeType="showTreeType"></system-tree>
			</div>
		</el-aside>
		<el-container>
			<el-main>
				<el-header style="text-align: right; font-size: 12px">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>{{
							$route.name
						}}</el-breadcrumb-item>
						<el-breadcrumb-item v-for="(v, i) of navs" :key="i">{{
							v
						}}</el-breadcrumb-item>
					</el-breadcrumb>
					<div class="timmer_wrap">
						<div class="form_wrap">
							<el-date-picker
								v-model="timmer"
								:type="type.precise"
								range-separator="至"
								:format="type.format"
								placeholder="选择日期"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="changeDate"
								v-if="showTimeLinePiker"
							>
							</el-date-picker>
							<slot name="leftRule"></slot>
						</div>
						<div class="btn_wrap">
							<el-button type="primary" @click="renovate"
								>查询</el-button
							>
							<slot name="rightBtn"></slot>
						</div>
					</div>
				</el-header>
				<slot></slot>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import systemTree from "@/components/luyiming/SystemTree/index.vue";
import { debounce } from "@/utils";
import moment from "moment";

export default {
	name: "KdAbnormalTemplate",
	components: {
		systemTree
	},
	props: {
		datePickType: {
			type: Object,
			default: () => ({
				format: "yyyy-MM-dd",
				precise: "daterange", // 精度 year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
				longer: "30"
			})
		},
		treeType: {
			type: Array,
			default: () => ["root"]
		},
		showTimeLinePiker: {
			type: Boolean,
			default: () => true
		},
		unInitTimmer: {
			type: Boolean,
			default: () => false
		},
		showTreeType: {
			type: Array,
			default: () => ['area', 'org']
		},
		leaf: {
			type: String,
			default: () => 'all'
		},
	},
	computed: {
		type() {
			const resultTime = Object.assign(
				{},
				{
					format: "yyyy-MM-dd",
					precise: "daterange",
					longer: "30"
				},
				this.datePickType
			);
			const { format, precise, longer } = resultTime;
			if (typeof format !== "string") {
				throw new Error("日期格式化不合法");
			}
			if (typeof precise !== "string") {
				throw new Error("日期选择器类型必须是string");
			}
			return resultTime;
		}
	},
	data() {
		return {
			smallStyle: false,
			resizeHandOwn: null,
			showTree: false,
			navs: [],
			treeNode: [],
			timmer: "",
			nodes: [],
			nodetreeType: '',
		};
	},
	watch: {
		// timmer(value){
		// 	this.handleEvents()
		// }
	},
	mounted() {
		this.initTime()
		this.resizeHandOwn = debounce(() => {
			this.resizePage();
		}, 300);
		this.resizePage();
		window.addEventListener("resize", this.resizeHandOwn);
	},
	methods: {
		initTime() {
			// 因为日期选择可能是时间段，需要该项初始时为数组
			let timer = [];
			if (/range/.test(this.type.precise)) {
				timer[0] = moment()
					.subtract(1, "week")
					.format("YYYY-MM-DD HH:mm:ss");
				timer[1] = moment().format("YYYY-MM-DD HH:mm:ss");
				if(this.unInitTimmer){
					timer = []
				}
			} else {
				// 此时日期组件只有一个选项，所以timer变成日期格式
				timer = new Date();
				if(this.unInitTimmer){
					timer = '';
				}
			}
			this.timmer = timer;
		},
		resizePage() {
			let windowWidth = document.body.clientWidth;
			if (windowWidth < 1280) {
				this.smallStyle = true;
				this.showTree = true;
			} else {
				this.smallStyle = false;
				this.showTree = false;
			}
		},
		changeShowBar() {
			this.showTree = !this.showTree;
		},
		treeHandle(...rest) {
			const [node, Nodes, vueExm, treeType] = rest;
			const navs = [];
			let start = Nodes;
			while (start.parent) {
				navs.push(start.data.name);
				start = start.parent;
			}
			navs.reverse();
			this.navs = navs;
			this.nodes = Nodes.data;
			this.treeNode = rest[0];
			this.nodetreeType = treeType;
			this.handleEvents();
		},
		changeDate() {
			this.handleEvents();
		},
		renovate() {
			this.handleEvents();
		},
		handleEvents() {
			const param = {
				id: this.treeNode.id,
				type: this.treeNode.type,
				nodes: this.nodes,
				treeType: this.nodetreeType,
			};
			const dateObj = {};
			if (/range/.test(this.type.precise)) {
				dateObj.startTime = this.timmer[0] || "";
				dateObj.endTime = this.timmer[1] || "";
			} else {
				dateObj.time = this.timmer || "";
			}
			console.log(dateObj);

			Object.assign(param, dateObj);
			this.$emit("treeHandle", param);
		}
	}
};
</script>

<style lang="scss">
.kd-abnormal-template {
	position: relative;
	/deep/ {
		.el-range-separator {
			width: 8%;
		}
	}
	.kd-left-tree-wrap {
		width: 300px;
		overflow-x: hidden;
		transition: width 0.5s;
	}
	.unchange_tree_wrap {
		min-width: 300px;
		height: 100%;
		overflow: hidden;
	}
	.showSmallWrap {
		width: 0 !important;
	}
	.smailbg {
		width: 0px;
		height: 15px;
		left: -11px;
		transition: width 0.5s;
		cursor: pointer;
		top: 80px;
		z-index: 99;
		transform: rotateZ(90deg);
		@include ladderShaped(#304156);
		position: absolute;
		span {
			transform: rotateZ(90deg);
			display: block;
			text-align: center;
			color: #fff;
		}
	}
	.smailbg.showSmallBtn {
		width: 40px;
	}
	.el-main {
		padding-top: 0;
		overflow: hidden;
		overflow: auto;
	}
	.el-header {
		min-height: 100px;
		padding: 10px 0;
		.el-breadcrumb {
			line-height: 30px;
			height: 30px;
			.el-breadcrumb__inner {
				color: $unImportantColor !important;
			}
			& > :last-child .el-breadcrumb__inner {
				font-weight: bold;
				color: #000 !important;
			}
		}
		.timmer_wrap {
			padding-top: 10px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			& > div {
				display: flex;
				justify-content: flex-start;
			}
		}
	}
}
.layout_2 .kd-abnormal-template {
	height: calc(100vh - #{$headerRouterHeight + $footerWidth});
	// border: 1px solid #eee;
	.kd-left-tree-wrap {
		margin-bottom: 0;
		// margin-right: 15px;
		background-color: #fff; //#D3DCE6;
		border-right: 1px solid #eee;
		padding: 0;
	}
}
.layout_1 .kd-abnormal-template {
	height: 100%;
	// border: 1px solid #eee;
	.kd-left-tree-wrap {
		margin-bottom: 0;
		// margin-right: 15px;
		background-color: #fff; //#D3DCE6;
		border-right: 1px solid #eee;
	}
}
</style>
